<template>
  <div style="clear: both; ">

    <el-dialog :title="'添加开发计划'" v-model="editFormVisible" :visible.sync="editFormVisible" width="30%" :before-close="handleClose">
      <el-form :model="editForm" label-width="80px" min-height="150px" label-position="right" size="small">

        <el-form-item label="时间" required prop="enddate">
          <el-col :span="13">
            <el-date-picker v-model="editForm.enddate" type="date" style="width: 100%;" placeholder="选择日期"></el-date-picker>
          </el-col>
        </el-form-item>

        <el-form-item label="计划内容" style="" required>
          <el-input  type="textarea" :autosize="{ minRows: 5, maxRows: 4}" placeholder="Please input"  v-model="editForm.content">
          </el-input>
        </el-form-item>

        <el-form-item size="large" label-position="right">
          <el-button size="small" @click="editFormVisible = false" label-position="right">取 消</el-button>
          <el-button size="small" type="primary"  label-position="right"  @click="addPlan()">提交</el-button>
        </el-form-item>

      </el-form>
    </el-dialog>


    <el-container style="height: 500px;width: 400; border: 1px solid #eee;">
      <el-header style="margin-top: 20px;height: 30px;">
        <el-row :gutter="20">
          <el-col :span="5">
            <div class="grid-content bg-purple">
              <el-select v-model="value" @change='getdata()' placeholder="我负责的销售机会" size="small">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple"></div>
          </el-col>
          <el-col :span="7">
            <div v-if="isShow" class="grid-content bg-purple">
              <el-input placeholder="搜索机会" v-model="input10" size="small" style="width: 200px;height: 10px;font-size: 14px;margin-right: 5px;"
                clearable>
              </el-input>
              <el-button size="mini" style="font-size: 14px;" type="primary" @click="selectKey()">查询</el-button>
            </div>
          </el-col>
        </el-row>
      </el-header>

      <el-main>
        <el-table :data="tableData" @expand-change="getPlans" style="border-top: 2px solid;border-top-color:#6299FF; with:100%">

          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="计划进度">
                </el-form-item>
                <el-row v-for="item in plans" :key='item.planid' style="margin-left: 150px;" type="flex">
                  <el-col :span="14">
                    <el-form-item label="计划日期" >
                      <span>{{item.plandate}}</span>
                    </el-form-item>
                  </el-col>
                  <el-col  :span="15">
                     <el-form-item label="计划内容">
                         <span>{{item.plancontent}}</span>
                       </el-form-item>
                  </el-col>
                </el-row>

               </el-form>

              <el-steps :active="2" finish-status="success" style="padding-left: 100px; padding-right: 100px;">
                <el-step title="待进行"></el-step>
                <el-step title="进行中"></el-step>
                <el-step title="已完成"></el-step>
              </el-steps>

            </template>
          </el-table-column>

          <el-table-column prop="chancename" label="机会名称" align="center">
          </el-table-column>

          <el-table-column prop="chancecustomer" label="客户名称">
          </el-table-column>

          <el-table-column prop="chancekind" label="客户类别" align="center">
          </el-table-column>

          <el-table-column prop="enddate" label="结束时间" align="center">
          </el-table-column>

          <el-table-column prop="state" label="状态" align="center" :filter-method="filterResult" sortable column-key="state"
            filter-placement="bottom-end" :filters="[{ text: '已分配', value: '已分配' }, { text: '开发成功', value: '开发成功' },{ text: '开发失败', value: '开发失败' }]">
          </el-table-column>

          <el-table-column prop="planumber" label="执行计划个数" align="center">
          </el-table-column>

          <el-table-column label="操作" align="center" width="250px" v-if="value!='全部销售机会'">
            <template slot-scope="scope">
              <el-button type="primary" @click="handleEdit(scope.row)" size="mini" style="font-size: 14px;" plain>制定开发计划</el-button>
            </template>
          </el-table-column>

          </el-row>
        </el-table>
      </el-main>

      <!-- 分页 -->

        <el-pagination
        style="margin-top: 20px;text-align: center;margin-top: 1%;"
         @current-change="handleCurrentChange"
         @size-change="handleSizeChange"
         :page-sizes="[3,5,10]"
         :current-page.sync="currentPage1"
         :page-size="pageSize"
         background='true'
         layout="total, prev, pager, next"
         :total="totleSize">
        </el-pagination>

    </el-container>

  </div>

</template>

<script src="./vue.js"></script>
<script>
  export default {
    data() {
      return {
        pageSize: 5,
        currentPage1: 1,
        totleSize: 10,
        isShow:false,
        active: '', //计划进度参数
        options: [ //选项
          {
            value: '我负责的销售机会',
            label: '我负责的销售机会'
          }, {
            value: '全部销售机会',
            label: '全部销售机会'
          }
        ],

        value: '我负责的销售机会',
        input10: '', //input
        tableData: [],
        // tableData: [{
        //   chancename: "网上的法国红酒",
        //   chancecustomer: '陈瑶',
        //   chancekind: '新客户',
        //   enddata: '2020-01-02',
        //   state: "已分配",
        //   plannumber: "3",
        // }],
        multipleSelection: [],
        editFormVisible: false,
        //编辑界面数据
        editForm: {
          content: "",
          enddate: '',
          planchanceid:2
        },
        plans:[],
      }
    },
    created() {
      this.getdata()
    },
    methods: {
      getPlans(row){

        this.getRequest('/chance/getPlan?planchanceid=' +row.planno)
           .then(successResponse => {
             if (successResponse.data.status == 200) {
               this.plans = successResponse.data.obj;
             } else
               this.$message.error(successResponse.data.msg);
           })
           .catch(failResponse => {
             this.$message.error('网络不通畅');
           })
      },
      //显示编辑界面
      handleEdit: function(row) {
        this.editFormVisible = true;
        this.editForm.planchanceid=row.planno;
        //this.$message.success(this.editForm.planchanceid+"")
      },
      //分页
      getdata() {
        var name=this.$store.state.userInfo.name;
        this.isShow=false;
       if(this.value!='我负责的销售机会'){
          this.isShow=true
          name=""
       }
       
        this.getRequest('/chance/getPageData?username=' + name+'&startPage=' + this.currentPage1 + '&pageSize=' + this.pageSize)
           .then(successResponse => {
             if (successResponse.data.status == 200) {
               this.tableData = successResponse.data.obj;
               this.totleSize = successResponse.data.totleSize;
             } else
               this.$message.error(successResponse.data.msg);
           })
           .catch(failResponse => {
             this.$message.error('网络不通畅');
           })
      },
      selectKey(){
       var name=this.$store.state.userInfo.name;
       if(this.value!='我负责的销售机会'){
          name=""
       }
       if(!this.input10){
          this.getdata();
          return;
       }
       else{
        this.getRequest('/chance/searchChance?username=' + name+'&content=' + this.input10)
           .then(successResponse => {
             if (successResponse.data.status == 200) {
               this.tableData = successResponse.data.obj;
               this.totleSize = successResponse.data.totleSize;
             } else
               this.$message.error(successResponse.data.msg);
           })
           .catch(failResponse => {
             this.$message.error('网络不通畅');
           })
         }
      },
      addPlan(){
        this.postRequest('/chance/addPlan', {
              plancontent:this.editForm.content,
              plandate:this.editForm.enddate,
              planchanceid:this.editForm.planchanceid,
            })
            .then(successResponse => {
              if (successResponse.data.status == 200) {
                this.$message.success("新增成功！");
                this.getdata();
              } else
                this.$message.error(successResponse.data.msg);
            })
            .catch(failResponse => {
              this.$message.error('网络不通畅');
            })
          this.editFormVisible = false;
        }
      },

      filterDate(value, row, column) {
        const date = column['date'];
        return row[date] === value;
      },
      filterResult(value, row) {
        return row.result === value;
      },
      filterID(value, row) {
        return row.id === value;
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },

  }
</script>

<style>
  .demo-table-expand {
    font-size: 0;
  }

  .demo-table-expand label {
    width: 100px;
    color: #99a9bf;
  }

  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }

  .el-row {
    margin-bottom: 20px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .el-col {
    border-radius: 4px;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
